import React, {Component} from 'react'
import {
    Text,
    View,
    StyleSheet,
    Button,
    Image,
    FlatList,
    ScrollView,
    StyleProp,
    ViewStyle,
    TouchableOpacity
} from 'react-native'
import {default as styles, HUNDRED_PERCENT, roundWithSize} from "../../../../style/index";
import SwipeableViews from 'react-swipeable-views-native';
import {autoPlay} from 'react-swipeable-views-utils/src';
import {inject, observer} from "mobx-react";
import {Store} from "../../../../store";
import FastImageCustom from "../../../widget/FastImageCustom";
import {afterAnimation, defaultArr, getAssetUrl} from "../../../../util";
import FastImage from "react-native-fast-image";
import {BannerStore, Banner} from "../../../../store/modules/main/banner";
import * as _ from "lodash";
import {ProductDetailActionProps} from "../../../../page/primary/productDetail";
import {Actions} from "react-native-router-flux";

const AutoPlaySwipeableViews = autoPlay(SwipeableViews);

function Pagination(props: { dots: number, style?: StyleProp<ViewStyle>, index?: number, onChangeIndex: { (index: number): void } }) {
    const {dots, index = 1, onChangeIndex, style} = props;
    return (<View style={[styles.flexDirectionRowNotFlex, styles.justifyEnd, styles.centerH, style]}>
        {_.times(dots, (_index) => (<TouchableOpacity key={_index}
                                                      style={[roundWithSize(10), {
                                                          marginLeft: 4,
                                                          backgroundColor: index === _index ? "rgb(49, 159, 214)" : "rgb(228, 230, 231)"
                                                      }]}
                                                      onPress={_ => onChangeIndex(_index)}/>))}
    </View>)
}

interface BannerSectionProps extends Store {

}

interface BannerSectionState {
    index: number
}

@inject("banner")
@observer
export default class BannerSection extends Component<BannerSectionProps, BannerSectionState> {
    state = {
        index: 0,
    };
    banner: BannerStore;
    handleChangeIndex = index => {
        this.setState({
            index,
        });
    };

    async refresh(categoryId: number) {
        afterAnimation(async () => {
            await this.banner.getBanners(categoryId);

        });
    }

    constructor(props) {
        super(props);
        this.banner = this.props.banner;
    }

    navigateToProductDetail(productId: number) {
        return () => {
            const props: ProductDetailActionProps = {id: productId};
            Actions.push("ProductDetail", props);
        }
    }

    render() {
        const bannerHeight = 150;
        const {index} = this.state;
        const {bannerList} = this.banner;
        return (
            <View>
                {bannerList.length ? (<View>
                        <AutoPlaySwipeableViews index={index} onChangeIndex={this.handleChangeIndex}
                                                style={[{flex: 0, height: bannerHeight}]}>
                            {
                                bannerList.map(({imageUrl, productId, id}, index) => {
                                    return (
                                        <TouchableOpacity key={id} style={{flex: 1}} activeOpacity={.9}
                                                          onPress={this.navigateToProductDetail(productId)}>
                                            <FastImageCustom key={index} source={{uri: getAssetUrl(imageUrl)}}
                                                             style={{flex: 1, width: HUNDRED_PERCENT}}
                                                             resizeMode={"cover"}/>
                                        </TouchableOpacity>
                                    )
                                })
                            }
                        </AutoPlaySwipeableViews>
                        <Pagination dots={bannerList.length} style={{position: "absolute", right: 8, bottom: 8}}
                                    index={index}
                                    onChangeIndex={this.handleChangeIndex}/>
                    </View>)
                    : null
                }

            </View>
        )
    }
}


const BannerStyles = StyleSheet.create({
    container: {}
});
